<!--  -->
<template>
  <div
    class="ruler-outer"
    :style="{
      width: width + 'px',
      height: height + 'px',
      left: startX + 'px',
      top: startY + 'px',
      overflow: 'scroll',
    }"
  >
    <div
      class="vue-ruler"
      @wheel="handleWheel($event)"
      :style="{
        'padding-left': innerVRuleSize + 1 + 'px',
        'padding-top': innerHRuleSize + 1 + 'px',
        width: innerWidth + 'px',
        height: innerHeight + 'px',
        left: startX + 'px',
        top: startY + 'px',
      }"
    >
      <!-- 左上角方块开始 -->
      <div
        class="vue-ruler_corner"
        :style="{
          width: innerVRuleSize + 'px',
          height: innerHRuleSize + 'px',
        }"
      ></div>
      <!-- 左上角方块结束 -->
      <!-- 垂直方向直角尺开始 -->
      <div class="vue-ruler_v" :style="{ width: innerVRuleSize + 'px' }">
        <div
          v-for="item in vItems"
          :class="item.class"
          :key="item.value"
          :style="{ top: item.top + 'px' }"
        >
          <span v-if="item.class === 'tickLabel'"> {{ item.value }}</span>
        </div>
      </div>
      <!-- 垂直方向直角尺结束 -->
      <!-- 水平方向直角尺开始 -->
      <div class="vue-ruler_h" :style="{ height: innerHRuleSize + 'px' }">
        <div
          v-for="item in hItems"
          :class="item.class"
          :key="item.value"
          :style="{ left: item.left + 'px' }"
        >
          <span v-if="item.class === 'tickLabel'"> {{ item.value }}</span>
        </div>
      </div>
      <!-- 水平方向直角尺结束 -->
      <!-- 内部部分开始 -->
      <div
        class="vue-ruler_content"
        :style="{
          width: innerWidth - innerHRuleSize + 'px',
          height: innerHeight - innerVRuleSize + 'px',
        }"
      >
        <div
          :style="{
            // transform: 'scale(' + zoom + ')',
            // width: '100px',
            // height: '100px',
          }"
        >
          <slot></slot>
        </div>
      </div>
      <!-- 内部部分结束 -->
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: 'vue-x-ruler',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      innerWidth: this.width,
      innerHeight: this.height,
      vItems: [],
      hItems: [],
      zoom: 1, // 缩放比例
      innerVRuleSize: this.vRuleSize,
      innerHRuleSize: this.hRuleSize,
    };
  },
  props: {
    startX: {
      type: [String, Number],
      default: 0,
    },
    startY: {
      type: [String, Number],
      default: 0,
    },
    width: {
      type: [String, Number],
      default: window.innerWidth,
    },
    height: {
      type: [String, Number],
      default: window.innerHeight,
    },
    vRuleSize: {
      type: [String, Number],
      default: 18,
    },
    hRuleSize: {
      type: [String, Number],
      default: 18,
    },
  },
  //监听属性 类似于data概念
  watch: {
    zoom: function () {
      this.innerWidth = this.zoom * this.width;
      this.innerHeight = this.zoom * this.height;
      this.innerVRuleSize = this.zoom * this.vRuleSize;
      this.innerHRuleSize = this.zoom * this.hRuleSize;
      this.init();
    },
  },
  //监控data中的数据变化
  //方法集合
  methods: {
    handleWheel: function (e) {
      e.preventDefault();
      // console.log(e)
      // console.log(e.wheelDelta)
      if (e.wheelDelta < 0) {
        this.zoom -= 0.2;
      } else {
        this.zoom += 0.2;
      }
      if (this.zoom >= 2) {
        this.zoom = 2;
        return;
      }
      if (this.zoom <= 1) {
        this.zoom = 1;
        return;
      }
    },
    init: function () {
      let tickLabelVPos = this.innerVRuleSize;
      this.vItems = [];
      while (tickLabelVPos <= this.innerHeight) {
        if ((tickLabelVPos - this.innerVRuleSize) % (50 * this.zoom) == 0) {
          this.vItems.push({
            class: 'tickLabel',
            value: tickLabelVPos - this.innerVRuleSize,
            top: tickLabelVPos,
          });
        } else if (
          (tickLabelVPos - this.innerVRuleSize) % (10 * this.zoom) ==
          0
        ) {
          // tickMajor
          this.vItems.push({
            class: 'tickMajor',
            value: tickLabelVPos - this.innerVRuleSize,
            top: tickLabelVPos,
          });
        } else if (
          (tickLabelVPos - this.innerVRuleSize) % (5 * this.zoom) ==
          0
        ) {
          this.vItems.push({
            class: 'tickMinor',
            value: tickLabelVPos - this.innerVRuleSize,
            top: tickLabelVPos,
          });
        }
        tickLabelVPos += 5 * this.zoom;
      }
      let tickLabelHPos = this.innerHRuleSize;
      this.hItems = [];
      while (tickLabelHPos <= this.innerWidth) {
        if ((tickLabelHPos - this.innerHRuleSize) % (50 * this.zoom) == 0) {
          this.hItems.push({
            class: 'tickLabel',
            value: tickLabelHPos - this.innerHRuleSize,
            left: tickLabelHPos,
          });
        } else if (
          (tickLabelHPos - this.innerHRuleSize) % (10 * this.zoom) ==
          0
        ) {
          // tickMajor
          this.hItems.push({
            class: 'tickMajor',
            value: tickLabelHPos - this.innerHRuleSize,
            left: tickLabelHPos,
          });
        } else if (
          (tickLabelHPos - this.innerHRuleSize) % (5 * this.zoom) ==
          0
        ) {
          this.hItems.push({
            class: 'tickMinor',
            value: tickLabelHPos - this.innerHRuleSize,
            left: tickLabelHPos,
          });
        }
        tickLabelHPos += 5 * this.zoom;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init();
    this.removeWindowResize = window.addEventListener('resize', this.init);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    this.removeWindowResize && this.removeWindowResize();
  }, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.ruler-outer {
  position: absolute;
  .vue-ruler {
    display: inline-block;
    position: relative;
    // background: white;
    color: #444;
    font-family: source code pro, 'Arial Narrow', 'Helvetica Neue', Helvetica,
      Arial, Veranda, sans-serif;
    font-size: 12px;
    line-height: 14px;
    background: url(../../assets/il-grid-trans.png) top left repeat;
    .line {
      background: #444;
    }
    .vue-ruler_corner {
      position: absolute;
      background-color: white;
      top: 0px;
      left: 0px;
      border-left: 1px solid;
      border-top: 1px solid;
      z-index: 10;
    }
    .vue-ruler_v {
      position: absolute;
      background-color: white;
      left: 0px;
      top: 0px;
      border-right: 1px solid;
      z-index: 9;
      .tickLabel {
        position: absolute;
        background: #444;
        right: 0px;
        height: 1px;
        width: 100%;
        text-indent: 1px;
        span {
          display: block;
          position: absolute;
          top: 1px;
          right: 0px;
          margin-right: 18px;
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          -o-transform: rotate(-90deg);
          transform: rotate(-90deg);
          -webkit-transform-origin: top right;
          -moz-transform-origin: top right;
          -ms-transform-origin: top right;
          -o-transform-origin: top right;
          transform-origin: top right;
        }
      }
      .tickMajor {
        position: absolute;
        background: #444;
        right: 0px;
        height: 1px;
        width: 6px;
      }
      .tickMinor {
        position: absolute;
        background: #444;
        right: 0px;
        height: 1px;
        width: 4px;
      }
    }
    .vue-ruler_h {
      position: absolute;
      background-color: white;
      left: 0px;
      top: 0px;
      border-bottom: 1px solid;
      z-index: 9;
      .tickLabel {
        position: absolute;
        background: #444;
        top: 0px;
        width: 1px;
        height: 100%;
        text-indent: 1px;
      }
      .tickMajor {
        position: absolute;
        background: #444;
        bottom: 0px;
        width: 1px;
        height: 6px;
      }
      .tickMinor {
        position: absolute;
        background: #444;
        bottom: 0px;
        width: 1px;
        height: 4px;
      }
    }
    .vue-ruler_content {
      // background: white;
      // overflow: scroll;
    }
  }
}
</style>
